<template>
  <div style="background: #f8f7f7;
              position: fixed;
              height: 100%;
              width: 100%;">
    <div class="login_box 文本框-宽"
         style="background: #ffffff;">
      <!--登陆表单-->
      <el-form label-width="0px"
               class="login_form"
               :model="loginForm"
               :rules="loginFormRules"
               ref="loginFormRef">

        <el-tabs v-model="activeName"
                 type="card"
                 @tab-click="handleClick">
          <el-tab-pane label="扫码登录"
                       name="first"></el-tab-pane>
          <el-tab-pane label="账号登录"
                       name="second">
            <el-tabs v-model="loginWays"
                     ref="tabs">
              <el-tab-pane label="验证码登录"
                           name="1">
                <el-form-item prop="username">
                  <el-input placeholder="请输入手机号"
                            v-model="loginPhoneNumber">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input placeholder="请输入验证码"
                            v-model="identifyingCode"
                            prefix-icon="el-icon-lock">
                  </el-input>
                </el-form-item>
                <el-row type="flex"
                        justify="end">
                  <el-button type="text"
                             @click="changeLoginWays('2')">切换为密码登录</el-button>
                </el-row>
                <el-row type="flex"
                        justify="end"
                        style="padding-bottom: 20px;">
                  <el-checkbox v-model="agreement">登录，即表明你同意我们的用户协议和隐私政策</el-checkbox>
                </el-row>
                <el-row type="flex"
                        justify="end">
                  <el-button type="danger"
                             size="220"
                             @click="login">登录</el-button>
                </el-row>

              </el-tab-pane>
              <el-tab-pane label="密码登录"
                           name="2">
                <el-form-item prop="username">
                  <el-input placeholder="请输入手机号"
                            v-model="loginPhoneNumber">
                    <template slot="prepend">+86</template>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input placeholder="请输入密码"
                            v-model="loginForm.password"
                            prefix-icon="el-icon-lock"
                            type="password">
                  </el-input>
                </el-form-item>
                <el-row type="flex"
                        justify="end">
                  <el-button type="text"
                             @click="changeLoginWays('1')">切换为验证码登录</el-button>
                </el-row>
                <el-row type="flex"
                        justify="end"
                        style="padding-bottom: 20px;">
                  <el-checkbox v-model="agreement">登录，即表明你同意我们的用户协议和隐私政策</el-checkbox>
                </el-row>
                <el-row type="flex"
                        justify="end">
                  <el-button type="danger"
                             size="220"
                             @click="login">登录</el-button>
                </el-row>

              </el-tab-pane>
            </el-tabs>
            <el-row type="flex"
                    justify="end">
              <el-button type="text"
                         style='height:10px;'
                         @click="toRegister">没有账号？点击注册</el-button>
            </el-row>
          </el-tab-pane>
        </el-tabs>
        <!--账号登陆-->

      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      activeName: 'second',
      loginWays: '2',
      loginPhoneNumber: '',
      loginForm: {
        phoneNumber: 0,
        password: "",
        loginIp: "",
        loginDevice: ""
      },
      agreement: false,
      identifyingCode: '',
      loginFormRules: {
        username: [
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
        ],
        password: [
          { min: 6, max: 15, message: "密码长度为6到15个字符", trigger: "blur" }
        ],
        identifyingCode: [
          { min: 6, max: 6, message: "验证码长度为6个字符", trigger: "blur" }
        ],
      }
    };
  },
  created () {
    this.init()
  },
  methods: {
    changeLoginWays (str) {
      this.loginWays = str;
    },
    toRegister () {
      this.$router.push("/Register");
    },
    init () {
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = "none";
      })
      this.$nextTick(function () {
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = "none";
      })
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    async login () {
      window.sessionStorage.setItem('idUser', 133);
      this.$router.push(window.sessionStorage.getItem("path"));
      // this.loginForm.phoneNumber = parseInt(this.loginPhoneNumber)
      // const { data: res } = await this.$http.get('http://39.102.77.65:8081/user/login', {
      //   params: this.loginForm
      // })
      // if (res.msg == '登录成功') {
      //   window.sessionStorage.setItem('idUser', res.user.idUser);
      //   this.$router.push(window.sessionStorage.getItem("path"));
      //   window.sessionStorage.removeItem('path');
      // }
      // else {
      //   this.$message.error('密码错误！');
      // }
      console.log(res);
    }
  }
}
</script>

<style>
.login_box {
  width: 400px;
  height: 350px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.文本框-宽 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 30px;
  margin-bottom: 16px;
  margin-top: 16px;
}
</style>
